<template>
  <div class="singer-container">
    <div class="singer-header">
      <h2 class="section-title">热门歌手</h2>
      <span class="more-tag" @click="handleMoreClick">更多</span>
    </div>
    <div class="singers-grid">
      <Singer 
        v-for="singer in singers" 
        :key="singer.id"
        :singer="singer"
        @click="handleSingerClick"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Singer from '@/components/home/PopularSinger/SingerCard.vue'

interface SingerData {
  id: number
  name: string
  avatar?: string
}

// 示例歌手数据
const singers = ref<SingerData[]>([
  {
    id: 1,
    name: '周杰伦',
    avatar: 'https://picsum.photos/99/99?random=1'
  },
  {
    id: 2,
    name: '邓紫棋',
    avatar: 'https://picsum.photos/99/99?random=2'
  },
  {
    id: 3,
    name: '林俊杰',
    avatar: 'https://picsum.photos/99/99?random=3'
  },
  {
    id: 4,
    name: '蔡依林',
    avatar: 'https://picsum.photos/99/99?random=4'
  },
  {
    id: 5,
    name: '陈奕迅',
    avatar: 'https://picsum.photos/99/99?random=5'
  },
  {
    id: 6,
    name: '张学友',
    avatar: 'https://picsum.photos/99/99?random=6'
  }
])

// 处理歌手点击事件
const handleSingerClick = (singer: SingerData) => {
  console.log('点击了歌手:', singer.name)
  // 这里可以添加跳转到歌手详情页的逻辑
}

const router = useRouter();

const handleMoreClick = () => {
  router.push('/singer');
  // 确保跳转后滚动到页面顶部
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
}
</script>

<style scoped>
.singer-container {
  width: 100%;
  padding: 20px;
  padding-left: 100px;
  min-width: 1200px;
}

.singer-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 935px;
  margin-bottom: 20px;
  position: relative;
  min-width: 1200px;
  flex-shrink: 0;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  min-width: 200px;
}

.more-tag {
  color: gray;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: 40px;
  height: 40px;
  justify-content: center;
  margin-top: 10px;
  font-size: 16px;
}

.more-tag:hover {
  color: red;
}

.singers-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  min-width: fit-content;
  flex-shrink: 0;
}
</style>

